TOA Design Review — Request Setup

01

App shell reference

Shared global navigation pattern used across the TOA workspace.

Reference

TOA application shell with the global navigation menu collapsed

02

Project request list

Standardise actions, statuses, filters and table behaviour.

Reviewed

BeforeAfter

Project Requests list after the reviewed updates

↔

180ms filter fade · 220ms column resize

What changed

1Add icon guidelines for buttons — Create Project Request.

2Status colours align to the Project Request lifecycle.

3Columns gain minimum widths, resize handles, truncation and horizontal scrolling.

4Filter and column controls use a consistent table toolbar pattern.

Pattern: Resizable Table Columns

Columns use defined minimum widths: Short 104px, Medium 128px, Long 176px, and Icon-only 48px.
Users can resize columns, but not below the minimum width.
Columns scale automatically on larger screens. A horizontal scrollbar appears when the columns’ minimum widths exceed the available table area, typically when the left navigation is expanded at around 1440px or below.
Long content is truncated with an ellipsis and shown on hover or focus.

Motion cue

Filter update140–180ms fade

ResizeDirect manipulation

Open source in FigJam ↗

03

Request editing actions

Separate destructive actions and protect deletion with confirmation.

Reviewed

BeforeAfter

Create project request after the reviewed updates

2 requests

↔

180ms modal · explicit confirmation

04

Review and submit

Apply a sticky bottom action pattern with a clear primary action.

Reviewed

BeforeAfter

Review and submit before the sticky action bar update

Review and submit after the sticky action bar update

↔

Sticky footer · primary bottom-right

01

Internship request list

Clarify request status, placement progress and returned-project feedback.

Reviewed

BeforeAfter

AD P and C internship request list after the reviewed updates

↔

Request list · status and feedback

02

Manage and submit projects

Keep request context visible while reviewing projects across intern categories.

Reviewed

BeforeAfter

AD P and C project submission page after the reviewed updates

↔

Grid and list views · grouped categories

03

Excel upload validation

Make import issues easy to count, locate and correct before drafts are created.

Reviewed

BeforeAfter

Project upload summary before the terminology update

Project upload summary after the terminology update

↔

Upload summary · issue terminology

01

Lock projects for review

Make the selection-dependent review action clear and predictable.

Reviewed

BeforeAfter

Project submissions before the Lock for Review action update

Project submissions after the Lock for Review action update

↔

Selection state · Lock for Review

02

Bulk review actions

Keep efficient approvals in the table and move reason-based decisions into project details.

Reviewed

BeforeAfter

Project submission bulk actions after the reviewed update

↔

Bulk approval · guided exceptions

03

Project review details

Prioritise review content and consolidate decisions in a sticky action bar.

Reviewed

BeforeAfter

IO project review details before the prioritised review layout

IO project review details after the prioritised review layout

↔

Review priority · sticky actions

01

Edit a returned project

Keep the correction flow focused and preserve page-level actions during long edits.

Reviewed

BeforeAfter

AD P and C returned project editing page after the reviewed update

↔

Focused edit · sticky actions